<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>课程详情</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../resources/layuiadmin/layui/css/layui.css">
  <link rel="stylesheet" href="../../../resources/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
  <div class="layui-container">
    <a class="fly-logo">
      <img src="../../../resources/img/logo.png" alt="layui">
    </a>
    <ul class="layui-nav fly-nav layui-hide-xs">
      <li class="layui-nav-item layui-this">
        <a class="student-index"><i class="iconfont icon-jiaoliu"></i>实验报告管理系统-学生界面</a>
      </li>
    </ul>
    <ul class="layui-nav fly-nav-user">
      <li class="layui-nav-item">
        <a class="fly-nav-avatar" href="javascript:;">
          <cite class="layui-hide-xs" id="cite-name"></cite>
          <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：学生"></i>
          <img src="" alt="" id="profileImg">
        </a>
        <dl class="layui-nav-child">
          <dd><a href="/student/set"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
          <dd><a class="student-index"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
          <hr style="margin: 5px 0;">
          <dd><a href="/home/logout" style="text-align: center;">退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

<div class="layui-hide-xs">
  <div class="fly-panel fly-column">
    <div class="layui-container">
      <ul class="layui-clear">
        <li><a class="student-index">首页</a></li>
        <li class="layui-this"><a href="/student/course">选课列表</a></li>
        <li><a id="studentHomework-list">实验报告提交情况</a></li>
        <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
      </ul>

      <div class="fly-column-right layui-hide-xs">
        <a id="submit-homework" class="layui-btn">提交实验报告</a>
      </div>
    </div>
  </div>
</div>

<div class="layui-container fly-marginTop">
  <span class="layui-breadcrumb">
    <a href="/student/course">选课列表</a>
    <a><cite>课程详情</cite></a>
  </span>
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8 content detail">
      <div class="fly-panel detail-box">

        <div class="fly-extend-banner fly-extend-banner-sm">
          <h1 class="fly-extend-banner-title" id="course-name"></h1>
        </div>

        <div class="detail-about">
          <a class="fly-avatar">
            <img src="" alt="" id="teacher-Img">
          </a>
          <div class="fly-detail-user">
            <a class="fly-link">
              <cite id="teacher-name"></cite>
              <i class="iconfont icon-renzheng" title="认证信息：教师"></i>
            </a>
          </div>
        </div>
        <div class="detail-body">
          <fieldset class="layui-elem-field">
            <legend>课程容量</legend>
            <div class="layui-field-box">
              <p id="course-size">
              </p>
            </div>
          </fieldset>
          <hr class="layui-bg-blue">
          <fieldset class="layui-elem-field">
            <legend>课程简介</legend>
            <div class="layui-field-box">
              <p id="course-desc">
              </p>
            </div>
          </fieldset>
        </div>
      </div>
    </div>

    <div class="layui-col-md4">
      <div class="fly-panel">
        <div class="fly-panel-main">
          <a href="" class="fly-zanzhu" style="background-color: #5FB878;" id="student-info">查看选课学生名单</a>
        </div>
      </div>
    </div>

    <div class="layui-col-md12">
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>布置的实验报告列表</legend>
        </fieldset>
        <div class="layui-card-body">
          <table class="layui-hide" id="homework-list" lay-filter="homework-list"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="fly-footer">
  <p>实验报告管理系统 2022 &copy; <a target="_blank">By 阿腾泰萌队</a></p>
</div>

<script src="../../../resources/layuiadmin/layui/layui.js"></script>
<script src="../../../resources/js/common.js"></script>
<script>
  layui.use(['element', 'table', 'form', 'util'], function(){
    var $ = layui.jquery,
        table = layui.table,
        util = layui.util;

    //获取一段url中的字段
    //如loacalhost:8080?courseId=1，getQueryString('courseId')则获取url中courseId的值
    var courseId = getQueryString('courseId');

    $('#student-info').attr('href','/student/studentInfo?courseId=' + courseId);

    //访问后台，获取学生信息
    $.getJSON('/student/getStudentInfo', function(data) {
      if (data.success) {
        //获取后台传递过来的教师信息
        var student = data.student;

        //判断从后台传入的图片流是否为空，
        //如果为空，给img标签添加noImage的图片路径
        //如果不为空，给img标签添加后台传入的图片路径
        if (student.profileImg != null){
          $('#profileImg').attr('src', student.profileImg);
        }else {
          $('#profileImg').attr('src', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597852452753&di=a753cb97410d9e6d3e312f303c326fdb&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F01%2F38%2F98%2F25573ca2525d341.jpg');
        }

        //根据name、Id或Class名称为相应标签里的内容添加值
        //html-替换标签里的内容
        //append-在标签原有内容的末尾添加新的内容
        //attr-给标签添加新的属性值
        $('#submit-homework').attr('href','/student/submit?studentId='+student.studentId);
        $('#cite-name').html(student.studentName);
        $('#studentHomework-list').attr('href','/student/studentHomeworkList?studentId=' + student.studentId);
        $('.student-index').attr('href', '/student/index?studentId=' + student.studentId);
      }
    });

    //访问后台，获取课程信息
    $.getJSON('/student/getCourseById?courseId=' + courseId, function(data) {
      if (data.success) {
        //获取后台传递过来的课程信息
        var course = data.course;

        $('#course-name').html(course.courseName);
        $('#course-size').html(course.courseSize);
        $('#course-desc').html(course.courseDesc);
        $('#teacher-Img').attr('src', course.teacher.profileImg);
        $('#teacher-name').html(course.teacher.teacherName);
      }
    });

    //渲染layui的数据表格，需要在table标签里面添加lay-filter=''
    table.render({
      elem: '#homework-list'
      ,url: '/student/listHomeworkByCourseId?courseId='+courseId
      ,cols: [[
        {field: 'homeworkId', width: 120, title: '实验报告ID号', sort: true, fixed: 'left'}
        ,{field: 'homeworkName', width: 150, title: '实验报告名', sort: true}
        ,{field: 'homeworkDesc', width: 250, title: '实验报告内容'}
        ,{field: 'homeworkFile', title: '实验报告文件', width: 120, templet: function(res){
            return '<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="downloadHomework('+res.homeworkId+')"><i class="layui-icon layui-icon-download-circle"></i></button>';
          }}
        ,{field: 'submitTime', title: '实验报告提交截至时间', width: 200, sort: true}
        ,{title: '创建时间', width: 160, templet: function(res){
            return util.toDateString(res.createTime, "yyyy-MM-dd HH:mm");
          }}
        ,{title: '最近一次更新时间', width: 160, templet: function(res){
            if (res.lastEditTime != null){
              return util.toDateString(res.lastEditTime, "yyyy-MM-dd HH:mm");
            }else {
              return "暂未更新";
            }
          }}
      ]]
      ,page: true
    });

  });
</script>

</body>
</html>